<template>
    <div id="app">
        <VHeader :seller="seller"></VHeader>
        <div class="tab border-1px">
            <div class="tab-item">
                <router-link to="/Goods">商品</router-link>
            </div>
            <div class="tab-item">
                <router-link to="/Ratings">评论</router-link>
            </div>
            <div class="tab-item">
                <router-link to="/Seller">商家</router-link>
            </div>
        </div>
        <keep-alive>
            <router-view :seller="seller"/>
        </keep-alive>
    </div>
</template>

<script type="text/ecmascript-6">
import { urlParse } from '@/common/js/util'
import VHeader from '@/components/Header/Header'

const ERR_OK = 0

export default {
    data () {
        return {
            seller : {
                id : (() => {
                    let queryParam = urlParse()
                    return queryParam.id
                })()
            }
        }
    },
    created () {
        this.$http.get('/api/seller?id=' + this.seller.id).then((response) => {
            response = response.body
            if(response.errno === ERR_OK) {
                this.seller = Object.assign({}, this.seller, response.data)
            }
        })
    },
    components : {
        VHeader
    }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
@import "./common/stylus/mixin.styl"
    #app
        .tab
            display:flex
            width : 100%
            height : 40px
            line-height : 40px
            border-1px(rgba(7,17,27,.1))
            .tab-item
                flex : 1
                text-align : center
                & > a
                    display : block
                    font-size : 14px
                    color : rgb(77,85,93)
                    &.active
                        color : rgb(240,20,20)
</style>
